<html lang="cn" xmlns:th="http://www.thymeleaf.org">


<head>
    <script th:src="@{/js/vue/vue.js}"></script>
    <th:block th:include="include :: footer"/>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale=1.0">
    <title>影视详情</title>
    <style>
        h1,
        h2,
        h3 {
            color: #333;
        }


        img {
            width: 200px;
            height: 250px;
            /*object-fit: cover;*/
        }

        p {
            line-height: 1.0;
        }
    </style>
    <link rel="stylesheet" href="./iconfont.css">

</head>

<body>
<div style="background-color: #ba8034;">
<div class="home" id="home"
     style="width: 100%;margin: auto;;background-color: #ba8034;min-height: 100vh">
    <div style="background-color: #ba8034; display: flex;;align-items: center;justify-content: center;padding-top: 5%;padding-bottom: 5%;padding-left: 5%;padding-right: 5%">


        <div style="margin-top: 0px">
            <div style="background-color: white; min-width: 93vw">
                <!--    <a href="https://www.baidu.com/">跳转百度</a>-->
                <div style="padding: 5%;padding-top: 1%;">

                    <div style="margin:0;margin-left: -2%;display: flex;position: relative;width: 100%;align-items: center;font-size: 20px;margin-top: 0.5%;margin-bottom: 0.5%">
                        <h2 style="color: green" th:if="${dsFilm.kind eq '0'}">电影</h2>
                        <h2 style="color: green" th:if="${dsFilm.kind eq '1'}">电视剧</h2>
                        <button style="margin: 10px;display: block; position: absolute;right: -5%; top: -3%; padding: 10px 20px; background-color: #a55200; color: white; border: none; border-radius: 5px; cursor: pointer;"
                                onclick="goBack()">返回上一页
                        </button>
                    </div>
                    <h1 style="margin: 0;margin-bottom: 1%;font-size: 45px">
                        <span th:text="${dsFilm.tvSeries}"></span>
                        <span style="color: #8e8e8e">   (<span th:text="${#dates.format(dsFilm.annual, 'yyyy')}"></span>)</span>
                    </h1>
                    <div style="display: flex;font-size: 25px">
                        <img th:src="@{${dsFilm.img}}" alt="加载中...">
                        <div style="margin-left: 20px;color: rgba(48,47,47,0.91)">
                            <div style="padding-top: 0px;">导演：<span style="color:#000;"
                                                                      th:text="${dsFilm.director}"></span></div>
                            <div style="padding-top: 5px;">编剧：<span style="color:#000;"
                                                                      th:text="${dsFilm.screenwriter}"></span>
                            </div>
                            <div style="padding-top: 5px;">主演：<span style="color:#000;"
                                                                      th:text="${dsFilm.actor}"></span></div>
                            <div style="padding-top: 5px;">类型：<span style="color:#000;"
                                                                      th:text="${dsFilm.getDisposeType()}"></span></div>
                            <!-- 使用 th:if 判断 episodeNum 不为 null 且不为空 -->
                            <div style="padding-top: 5px;" th:if="${!#strings.isEmpty(dsFilm.episodeNum)}">
                                集数：<span style="color:#000;" th:text="${dsFilm.episodeNum}"></span>
                            </div>
                            <!-- 使用 th:if 判断 annual 不为 null 且不为空 -->
                            <div style="padding-top: 5px;" th:if="${!#strings.isEmpty(dsFilm.annual)}">
                                上映时间：<span style="color:#000;"
                                               th:text="${#dates.format(dsFilm.annual, 'yyyy-MM-dd')}"></span>
                            </div>
                        </div>
                    </div>
                    <h3 style="font-size: 22px;color: green">剧情简介：</h3>
                    <div style="width: 100%;letter-spacing: 1.3px;line-height: 6px;font-size: 18px">
                        <p style="line-height: 1.3; text-indent: 2em;color: #000000"
                           th:text="${dsFilm.topicContent}"></p>
                    </div>


                    <!-- 使用 th:if 判断 dsFilm.awardInformation 是否不为空且不为 null -->
                    <th:block th:if="${dsFilm.awardInformation != null and dsFilm.awardInformation != ''}">
                        <h3 style="font-size: 22px;color: green">获奖情况：</h3>
                        <div style="width: 100%;letter-spacing: 1.3px;line-height: 6px;font-size: 18px">
                            <p style="line-height: 1.3; text-indent: 2em;color: #000000"
                               th:text="${dsFilm.awardInformation}"></p>
                        </div>
                    </th:block>


                    <div style="display: flex;gap: 2%">
                        <div v-for="(item, index) in urls" v-if="urls" style="text-align: center">
                            <div style="background-color: #f8f5f1;width: 161px;height: 50px;border-radius:19px 19px 19px 19px;display: flex;align-items: center;justify-content: center"
                                 @click="goToArticleDetail(item)">
                                <div style="font-size: 20px;color: green">播放链接{{index+1}}</div>
                                <svg style="width: 50px;height: 30px;" t="1739171433022" class="icon"
                                     viewBox="0 0 1024 1024"
                                     version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4481" width="200"
                                     height="200">
                                    <path d="M675.328 117.717333A425.429333 425.429333 0 0 0 512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667c0-56.746667-11.093333-112-32.384-163.328a21.333333 21.333333 0 0 0-39.402667 16.341333A382.762667 382.762667 0 0 1 896 512c0 212.074667-171.925333 384-384 384S128 724.074667 128 512 299.925333 128 512 128c51.114667 0 100.8 9.984 146.986667 29.12a21.333333 21.333333 0 0 0 16.341333-39.402667zM456.704 305.92C432.704 289.152 405.333333 303.082667 405.333333 331.797333v360.533334c0 28.586667 27.541333 42.538667 51.370667 25.856l252.352-176.768c21.76-15.253333 21.632-43.541333 0-58.709334l-252.373333-176.768z m-8.597333 366.72V351.466667l229.269333 160.597333-229.269333 160.597333z"
                                          fill="#3D3D3D" p-id="4482"></path>
                                </svg>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
</div>

<script th:inline="javascript">
    // var urls = [[${dsFilm.url}]];
    var urls = [[${urls}]];
    console.log(urls)


    // 定义返回上一页的函数
    function goBack() {
        window.history.back();
    }


    new Vue({
        el: '#home',
        data: {
            urls: urls,

        },
        methods: {

            goToFilmDate() {
                window.location.href = "/front/goToFilmDate";
            },
            // 定义点击事件处理函数
            goToArticleDetail(url) {
                // 这里可以编写点击题名后的具体逻辑，例如弹出提示框显示题名
                // 在新窗口或标签页中打开指定的 URL
                window.open(url, '_blank');
            }
        },


        mounted() {

        },
        created() {
        },

    });


</script>


</body>
</html>